<template>
    <div id="app">
        <transition name="slide" mode="out-in">
            <router-view />
        </transition>
    </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
// 开始进入过渡状态前，在元素被插入下一帧失效
// 这个和最初状态一样
.slide-enter {
    opacity: 0;
}

// 进入的过渡状态
.slide-enter-active {
    transition: all 4s linear;
}

// 进入的过渡状态结束
.slide-enter-to {
    transform: translateX(-100%);
    opacity: 1;
}

// 离开的过渡状态开始前，在离开过渡被触发时立即生效，下一帧立即移除
.slide-leave {
    transform: translateX(-100%);
    opacity: 1;
}

// 离开的过渡状态
.slide-leave-active {
    transition: all 0.3s ease;
}

// 离开过渡的结束状态，过渡动画完成后移除
.slide-leave-to {
    transform: translateX(100%);
    opacity: 0;
}
</style>
